﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="4.aspx.cs" Inherits="BaseWeb.JQuery.方法汇聚._4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;
        }
    </style>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="js/jquery-ui.js" type="text/javascript"></script>

    <style type="text/css">
        .divBody
        {
            list-style-type: none;
            margin: 3px;
            padding: 3px;
            width: 343px;
            border: 1px solid gray;
        }
        div li
        {
            margin: 3px 3px 3px 3px;
            padding: 3px;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
        }
        .comment_btn
        {
            height: 26px;
            line-height: 21px; /*针对IE*/
            width: 68px;
        }
    </style>

    <script type="text/javascript">
        //加载完成后初始化 
        function Init()
        {
            $("[id^='div_']").sortable('disable').hide();
            $("#div_0").show();
            $("#hid_Current").val("0");
        }

        //双击事件--进入程序
        function InApp(keyId)
        {
            alert(keyId);
            return false;
        }
        //双击事件--进入子菜单
        function InChildMenu(keyId)
        {
            var hid_Current = $("#hid_Current");
            if (keyId != hid_Current.val())
            {
                var oldPanel = $("#div_" + hid_Current.val());
                var newPanel = $("#div_" + keyId);
                oldPanel.hide();
                newPanel.show();
                hid_Current.val(keyId);
                $("#labMsg").text("进入菜单" + keyId);
            }
            return false;
        }


        //加载事件
        $(function()
        {
            //编辑事件   
            var checked = false;
            $("#btnSort").click(function(event)
            {
                checked = !checked;
                if (checked)
                {
                    $("[id^='div_']").sortable('enable');
                    $(this).val("退出排序");
                }
                else
                {
                    $("[id^='div_']").sortable('disable');
                    $(this).val("编辑排序");
                }
                return false;
            });

            //排序事件 
            $("[id^='div_']").sortable({
                opacity: 0.7, //拖动的透明度
                revert: true, //缓冲效果 
                cursor: 'move', //拖动的时候鼠标样式
                connectWith: ".ui-state-default",
                //开始用update 结果执行两次，浪费资源，故改成stop
                //但是stop在元素没有改变位置的时候也会执行，
                //用update其他js会有问题，^_^
                stop: function(event, ui)
                {
                    var sourceKeyId = ui.item.attr('id');
                    var preObjKeyId = "";
                    var afterObjKeyId = "";

                    var childrenNode = event.target.children;
                    for (var i = 0; i < childrenNode.length; i++)
                    {
                        if (childrenNode[i].innerHTML == ui.item[0].innerHTML)
                        {//找到当前的元素
                            if (i == 0)
                            {
                                afterObjKeyId = childrenNode[i + 1].id;
                            }
                            else if (i == childrenNode.length - 1)
                            {
                                preObjKeyId = childrenNode[i - 1].id;
                            }
                            else
                            {
                                preObjKeyId = childrenNode[i - 1].id;
                                afterObjKeyId = childrenNode[i + 1].id;
                            }
                        }
                    }
                    $.ajax({
                        url: "3.asmx/ChangeOrderIndex", //服务端处理程序
                        type: "post",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: '{SourceKeyId:"' + sourceKeyId + '",PreObjKeyId:"' + preObjKeyId + '",AfterObjKeyId:"' + afterObjKeyId + '"}',   //id:新的排列对应的ID,order：原排列顺序 
                        beforeSend: function()
                        {
                            $("#labMsg").text("正在更新");
                        },
                        success: function(msg)
                        {
                            $("#labMsg").text("更新完成");
                        }
                    });


                }
            });
            $("#sortable").disableSelection();

            //后退
            $("#btnBack").click(function()
            {
                var hid_Current = $("#hid_Current");
                if (hid_Current.val() == "0")
                {
                    return false;
                }
                else
                {
                    $.ajax({
                        url: "3.asmx/GetParentKeyId", //服务端处理程序
                        type: "post",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: '{KeyId:"' + hid_Current.val() + '"}',
                        beforeSend: function()
                        {
                            $("#labMsg").text("正在后退");
                        },
                        success: function(data, textStatus)
                        {
                            //debugger;
                            //$("[id^='div_']").hide();
                            $("#div_" + hid_Current.val()).hide();
                            $("#div_" + data.d).show();
                            hid_Current.val(data.d);
                            $("#labMsg").text("完成后退" + data.d);
                            return false;
                        }
                    });


                }
                return false;
            });
        });
        

    </script>

</head>
<body onload="Init()">
    <form id="form1" runat="server">
    <div>
        当前状态：<asp:Label ID="labMsg" runat="server" Text="无"></asp:Label>
    </div>
    <div id="divBody" runat="server" class="divBody">
    </div>
    <div id="toolbar" class="divBody">
        <table style="width: 100%;">
            <tr>
                <td>
                    <asp:Button ID="btnBack" runat="server" Text="后退" CssClass="comment_btn" OnClientClick="return false;" />
                </td>
                <td style="text-align: right;">
                    <asp:Button ID="btnSort" runat="server" CssClass="comment_btn" Text="进入排序" />
                </td>
            </tr>
        </table>
    </div>
    <asp:HiddenField ID="hid_Current" runat="server" />
    <%--<asp:HiddenField ID="hid_Parent" runat="server" />--%>
    </form>
</body>
</html>
